<style>
  .h1 {
    background-color: yellow;
  }
  .h2 {
    background-color: green;
  }
  .log {
    border: 1px solid black;
    padding: 2px;
    font-size: 1.2em;
    margin: 2px;
  }
  .strike {
    font-size: 200%;
  }
  .dodge {
    font-style: italic;
    opacity: 0.6;
    text-indent: 1em;
  }
  .death {
    border: 2px solid red;
  }
</style>

<div id="logs"></div>
<script src="./Hero.js"></script>
<script>
  const logs = document.getElementById('logs')
  // const h1 = Hero.createHero('蜘蛛侠', 1000, 150, 240, 0.3, 0.5)
  const hero2 = Hero.createHero('浩克', 2500, 300, 350, 0.03, 0.02)
  const hero3 = SHero.createHero('琦玉老师', 2500, 300, 350, 0.03, 0.02)

  function battle(h1, h2) {
    setTimeout(() => {
      const log = h1.attack(h2)
      logs.innerHTML = log + logs.innerHTML
      if (h2.death) {
        logs.innerHTML = Hero.deathLog(h1, h2) + logs.innerHTML
      } else {
        battle(h2, h1)
      }
    }, 500)
  }

  battle(hero2, hero3)
</script>
